<template>
  <div class="login-page">
    <!-- 背景装饰 -->
    <div class="login-bg"></div>
    
    <!-- 登录容器 -->
    <div class="login-container">
      
      <!-- 登录表单 -->
      <div class="login-form-container">
        <div class="form-title">用户登录</div>
        
        <form @submit.prevent="login" class="login-form">
          <div class="form-group">
            <div class="input-wrapper">
              <input 
                type="text" 
                v-model="ruleForm.username" 
                placeholder="请输入用户名"
                class="form-input"
                required
              />
            </div>
          </div>
          
          <div class="form-group">
            <div class="input-wrapper">
              <input 
                type="password" 
                v-model="ruleForm.password" 
                placeholder="请输入密码"
                class="form-input"
                required
              />
            </div>
          </div>
          
          <button type="submit" class="login-btn" :disabled="isLoading">
            <span v-if="!isLoading">登录</span>
            <span v-else>登录中...</span>
          </button>
        </form>
        
        <!-- 错误提示 -->
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <!-- 注册链接 -->
        <div class="register-link">
          <span>还没有账号？</span>
          <a @click="goToRegister" class="register-btn-link">立即注册</a>
        </div>
      
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/authApi'
import { setToken, setUserInfo } from '@/utils/auth'

export default {
  name: "Login",
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
      },
      isLoading: false,
      errorMessage: ''
    };
  },
  methods: {
    goToRegister() {
      console.log('点击立即注册按钮');
      console.log('当前路由:', this.$route.path);
      console.log('准备跳转到注册页面');
      
      this.$router.push('/register').then(() => {
        console.log('跳转到注册页面成功');
      }).catch(err => {
        console.error('跳转到注册页面失败:', err);
        // 备用方案：直接修改URL
        window.location.href = '/register';
      });
    },
    
    async login() {
      if (!this.ruleForm.username || !this.ruleForm.password) {
        this.errorMessage = '请输入用户名和密码'
        return
      }
      
      this.isLoading = true
      this.errorMessage = ''
      
      try {
        console.log('=== 开始登录请求 ===')
        console.log('表单数据:', this.ruleForm)
        
        const response = await login(this.ruleForm)
        console.log('=== 登录响应 ===')
        console.log('完整响应:', response)
        console.log('响应类型:', typeof response)
        console.log('响应code:', response.code, '类型:', typeof response.code)
        console.log('响应message:', response.message)
        console.log('响应data:', response.data)
        
        if (response.code === 200) {
          console.log('=== 登录成功 ===')
          setToken(response.data)
          setUserInfo({
            username: this.ruleForm.username
          })
          
          console.log('准备跳转到数据大屏')
          this.$router.push('/').catch(err => {
            console.error('路由跳转失败:', err)
            window.location.href = '/'
          })
        } else {
          console.log('=== 登录失败 ===')
          console.log('错误信息:', response.message || response.msg)
          this.errorMessage = response.message || response.msg || '登录失败'
        }
      } catch (error) {
        console.error('=== 登录异常 ===')
        console.error('错误详情:', error)
        console.error('错误响应:', error.response)
        this.errorMessage = '登录失败，请检查网络连接'
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped>
.login-page {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #010e50 url(@/assets/images/bg.jpg) center top no-repeat;
  background-size: 100% auto;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 35, 120, 0.3);
  backdrop-filter: blur(2px);
}

.login-container {
  position: relative;
  z-index: 10;
  background: rgba(0, 35, 120, 0.8);
  border: 1px solid rgba(62, 171, 255, 0.3);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 0 30px rgba(62, 171, 255, 0.3), inset 0 0 30px rgba(62, 171, 255, 0.1);
  backdrop-filter: blur(10px);
  min-width: 400px;
  max-width: 500px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.logo-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 10px rgba(62, 171, 255, 0.7));
}

.logo-text {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 15px rgba(62, 171, 255, 0.8);
  letter-spacing: 3px;
  margin: 0;
}

.subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  margin: 0;
  text-shadow: 0 0 5px rgba(62, 171, 255, 0.5);
}

.login-form-container {
  width: 100%;
}

.form-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  color: #fff;
  text-shadow: 0 0 10px rgba(62, 171, 255, 0.7);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  width: 100%;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  padding: 15px 50px 15px 20px;
  border: 1px solid rgba(62, 171, 255, 0.3);
  border-radius: 8px;
  background: rgba(0, 35, 120, 0.3);
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.form-input:focus {
  outline: none;
  border-color: rgba(62, 171, 255, 0.8);
  box-shadow: 0 0 15px rgba(62, 171, 255, 0.3);
  background: rgba(0, 35, 120, 0.5);
}

.input-icon {
  position: absolute;
  right: 15px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.login-btn {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #3eabff, #205bcf);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
  box-shadow: 0 4px 15px rgba(62, 171, 255, 0.3);
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4bb8ff, #2968d9);
  box-shadow: 0 6px 20px rgba(62, 171, 255, 0.5);
  transform: translateY(-2px);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.error-message {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 6px;
  padding: 12px;
  margin-top: 15px;
  color: #ff6b6b;
  text-align: center;
  font-size: 14px;
}

.register-link {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(62, 171, 255, 0.2);
}

.register-link span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.register-btn-link {
  color: #3eabff;
  text-decoration: none;
  margin-left: 5px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.3s ease;
}

.register-btn-link:hover {
  color: #4bb8ff;
  text-decoration: underline;
}

.login-footer {
  text-align: center;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(62, 171, 255, 0.2);
}

.login-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    margin: 20px;
    padding: 30px 20px;
    min-width: auto;
  }
  
  .logo-text {
    font-size: 24px;
  }
  
  .form-title {
    font-size: 20px;
  }
}
</style>
